<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Main Page - Dojo capabilities</title>

<style type="text/css">
@import "dojo/dojo-release-1.2.0/dijit/themes/tundra/tundra.css";
@import "dojo/dojo-release-1.2.0/dojo/resources/dojo.css";
@import "customJs/dhtmlgoodies-menubar/menu.css";
@import "dojo-showcase.css";
</style>

<script type="text/javascript" src="dojo/dojo-release-1.2.0/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
<script type="text/javascript" src="customJs/dhtmlgoodies-menubar/menu.js"></script>

<script type="text/javascript">
	// common for many
	dojo.require("dojo.parser");
	// for the top fisheye
	dojo.require("dojox.widget.FisheyeLite");
	/* // for a dojo based mock menu bar
	 dojo.require("dijit.Toolbar");
	 dojo.require("dijit.form.Button");
	 dojo.require("dijit.Menu"); */
	// for Tab container
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dijit.layout.TabContainer");
	dojo.require("dijit.form.Button");
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dijit.layout.TabContainer");
	// for Radio button
	dojo.require("dijit.form.CheckBox");
	// for Textbox
	dojo.require("dijit.form.ValidationTextBox");
	dojo.require("dijit.form.NumberTextBox");
	// for TextArea
	dojo.require("dijit.form.Textarea");
	// for inline edit text
	dojo.require("dijit.form.TextBox");
	dojo.require("dijit.InlineEditBox");
	// For Tree
	dojo.require("dojo.data.ItemFileReadStore");
	dojo.require("dijit.Tree");

	var init = function() {
		// turn li's in this page into fisheye items, presumtiously:	
		dojo.query("li.bounce").forEach( function(n) {
			new dojox.widget.FisheyeLite( {}, n);
		});
	};
	dojo.addOnLoad(init);

	function inlineEditHandler(idOfBox, value) {
        console.debug("Edited text for "+idOfBox+". New text reads: "+value);
    }
</script>
</head>
<body class="tundra">
<div id="libChooser" style="min-height: 110px;">
<ul>
	<li class="bounce"><span class="fisheyeTarget">Dojo</span><br>
	<div class="ilk">core js utilities, loads of widgets</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">Ext-JS</span><br>
	<div class="ilk">Out of box Eye Candy UI, pluggable, customizable</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">JQuery</span><br>
	<div class="ilk">Extremely compact, pluggable, microsoft endorsed</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">mootools</span><br>
	<div class="ilk">Flashy and compact library</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">prototype</span><br>
	<div class="ilk">Hugely popular, compact, UI using scriptaculous</div>
	</li>
	<li class="bounce"><span class="fisheyeTarget">yui</span><br>
	<div class="ilk">Pluggable, documented, lot of utilities and widgets</div>
	</li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="menuBar"><!--  <h2>Toolbar that looks like MenuBar</h2> 
		<div dojoType="dijit.Toolbar" id="firstMenuBar" class="menuBar"> 
			<div dojoType="dijit.form.DropDownButton"> 
				<span>Training</span> 
				<div dojoType="dijit.Menu"> 
					<div dojoType="dijit.MenuItem" label="Training Log">Training Log</div> 
					<div dojoType="dijit.MenuItem" label="Food Journal">Food Log</div> 
					<div dojoType="dijit.MenuSeparator"></div> 
					<div dojoType="dijit.MenuItem" label="Create new Food DB item">Food DB Entry</div> 
				</div> 
			</div> 
			<div dojoType="dijit.form.DropDownButton"> 
				<span>Old Site</span> 
				<div dojoType="dijit.Menu"> 
					<div dojoType="dijit.MenuItem" label="Home">Home</div> 
					<div dojoType="dijit.MenuSeparator"></div> 
					<div dojoType="dijit.MenuItem" label="Art 1">Art Composition 1</div> 
					<div dojoType="dijit.MenuItem" label="Art 2">Art Composition 2</div> 
					<div dojoType="dijit.MenuItem" label="Art 3">Art Composition 3</div> 
					<div dojoType="dijit.MenuItem" label="Art 4">Art Composition Final</div> 
					<div dojoType="dijit.MenuSeparator"></div> 
					<div dojoType="dijit.MenuItem" label="Art Final">Art Final</div> 
				</div> 
			</div> 
		</div> -->
<div id="dhtmlgoodies_menu">
<ul>
	<li><a href="http://www.dhtmlgoodies.com">Dojo Form Components</a>
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Radio</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Check Boxes</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Validating Textbox</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Text Area</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Inline Editable labels</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Editable Dropdowns</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Tooltips</a></li>
	</ul>
	</li>
	<li><a href="http://www.dhtmlgoodies.com">Dojo Complex Widgets</a>
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Tabs</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Tree</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Data Tables</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Calendar</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Progress Bar</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Modal Dialog</a></li>
	</ul>
	</li>
	<li><a href="http://www.dhtmlgoodies.com">Fancy Stuff using Dojo</a>
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Accordian</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Drag-N-Drop</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Animations</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Image Manipulation</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Color Chooser</a></li>
	</ul>
	</li>
	<li><a href="http://www.dhtmlgoodies.com">AJAX Interaction using Dojo</a></li>
	<li><a href="http://www.dhtmlgoodies.com">PHD Topics</a>
	<ul>
		<li><a href="http://api.dojotoolkit.org/">Dojo Event connect apis</a></li>
		<li><a href="http://api.dojotoolkit.org/">Automated Testing of JS</a></li>
		<li><a href="http://api.dojotoolkit.org/">Internationalization</a></li>
		<li><a href="http://api.dojotoolkit.org/">Documentation Standards</a></li>
	</ul>
	</li>
	<li><a href="http://www.dojotoolkit.org">More Help about Dojo</a>
	<ul>
		<li><a href="http://api.dojotoolkit.org/">Dojo API Documentation</a></li>
		<li><a href="http://www.dojotoolkit.org/book/dojo-book-1-0">Dojo Book</a></li>
		<li><a href="http://sitepen.com/labs/guides/?guide=DojoQuickStart">SitePen's Quickstart Guide</a></li>
		<li><a href="http://www.dhtmlgoodies.com">Dojo Campus</a></li>
	</ul>
	</li>
</ul>
</div>

</div>
<div id="contentArea">The Content Area
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" tabStrip="false" doLayout="false">
<div id="dojoFormComponents" dojoType="dijit.layout.ContentPane" title="Form Components">
<div id="radio" class="subcontainer" >
	<span class="label">Radio Button Enhancements: </span>There are minimal enhancement to regular radio button in Dojo. <br />
	Here is how a sample Radio button group looks like in Dojo. One enabled but de-selected, one enabled and selected and one disabled radio button.
	<div class="widgetDemo"> 
	<span class="label" >Simple Radio group :</span>
	<input type="radio" name="g1" id="g1rb1" value="news" dojoType="dijit.form.RadioButton" />
	<label for="g1rb1">news</label>
	<input type="radio" name="g1" id="g1rb2" value="talk" dojoType="dijit.form.RadioButton" checked="checked"/>
	<label for="g1rb2">talk</label>
	<input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled="disabled"/>
	<label for="g1rb3">weather</label>
	</div>
</div>
<div id="checkBox" class="subcontainer" >
	<span class="label">Checkbox Enhancements: </span>There are minimal enhancement to regular check boxes in Dojo. <br />
	Here is how a sample checkbox looks like in Dojo.
	<div class="widgetDemo"> 
	<input type="checkbox" name="cb2" id="cb2" dojoType="dijit.form.CheckBox" checked="checked"/>
		<label for="cb2">Normal checkbox, pre-selected.</label>
	<br />
	<input type="checkbox" name="cb3" id="cb3" dojoType="dijit.form.CheckBox" disabled="disabled">
		<label for="cb3">Disabled checkbox</label>
	<br/>
	<input type="checkbox" name="cb4" id="cb4" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked"/>
		<label for="cb4">Disabled checkbox, pre-selected</label>
	<br/>
	</div>
</div>
<div id="textBox" class="subcontainer">
	<span class="label">TextBox family: Validation, Currency, Number, Date, Time</span><br />
	
	<span class="label">dijit.form.TextBox :</span> Basic trim, change case.
	<div class="widgetDemo">Simple Textbox - with trim and title case enabled: 
		<input type="text" dojoType="dijit.form.TextBox" style="width: 30em;" 
		value="    lowercase text with 3 spaces on each side    " trim="true" propercase="true" />
	</div>
	<br /> 
	<span class="label">dijit.form.NumberTextBox</span> validation of the content as you type.
	<div class="widgetDemo">A NumberTextBox mandatory field, zero decimal places, max length = 3, constraint 0 &gt; num &gt; 120 - 
	<input type="text" name="occupation" class="verylong"
		dojoType="dijit.form.NumberTextBox" maxLength="3" constraints="{places:0,min:0,max:120}" required="true" promptMessage="Please Enter your age" />
	</div>
	<br /> 
	<span class="label">dijit.form.ValidationTextbox</span> Use the power of regexp to validate the content as you type.
	<div class="widgetDemo">A Validation TextBox mandatory field, regular expression = <code>regExp="[\w]+"</code>
	<label for="q03">Age: </label><input
		type="text" name="phone" value="someTestString" dojoType="dijit.form.ValidationTextBox" regExp="[\w]+"
		required="true" invalidMessage="Invalid. Space is not allowed in the text." />
	<br /> Note that Validation textbox can also accept regExpGen=funcname where funcname is js function to change the regexp based on conditions.
	</div>
</div>
<div id="textArea" class="subcontainer">
	<span class="label">TextArea enhancement</span> Textarea resizes as the text begins to over/underflow the displayed size.<br />
	<div class="widgetDemo"><textarea dojoType="dijit.form.Textarea" style="width:300px">
		Click at the end of this paragraph and start typing. 
		You will be amazed!</textarea> </div>
</div>
<div id="inlineEdit" class="subcontainer">
	<span class="label">Inline EditBox</span> Clickable html text. On click brings up the editor and after you change the text and tab out, new text is saved on the screen.<br />
	Also after tabout, the control is passed, optionally, to js function which can call ajax server call to let server know of the changes.
	<div class="widgetDemo"><span id="inlineEditSpan" dojoType="dijit.InlineEditBox" onChange="inlineEditHandler(this.id,arguments[0])">Edit me - I
	trigger the onChange callback</span></div>
</div>
<div id="editDropDwon" class="subcontainer">
	<span class="label">Editable Dropdown</span> Finally get over the damn select box which does not let you enter the stuff<br />
	<div class="widgetDemo"></div>
</div>
<div id="toolTip" class="subcontainer"></div>
</div>
<div id="dojoComplex" dojoType="dijit.layout.ContentPane" title="Complex Widgets">
<div id="tabContainer" class="subcontainer">
	<span class="label">Tab Container</span> Tab Containers offer tab based functionality. You can create tabs dynamimcally, subtabs, style them etc.<br />
</div>
<div id="treeContainer" class="subcontainer">
	<span class="label">Tree</span> Tree is rich widget<br />
	<div dojoType="dojo.data.ItemFileReadStore" url="tempTest.txt" jsid="popStore" ></div>
	<div dojoType="dijit.Tree" store="popStore" labelAttr="name" label="Pop Tarts"></div>
	<div dojoType="dojo.data.ItemFileReadStore" url="onClick.txt" jsid="popStore" ></div>
	<div dojoType="dijit.Tree" store="popStore" ></div>
</div>
</div>
<div id="dojoFancy" dojoType="dijit.layout.ContentPane" title="The Oomph!">There was once upon a time a hermit who lived in a forest at the foot
of a mountain, and passed his time in prayer and good works, and every evening he carried, to the glory of God, two pails of water up the mountain.</div>
</div>
</div>
<div id="teaserArea">The Teaser Area</div>
<div id="statusBar"></div>
<div style="clear: both;"></div>
</body>
</html>

